<template>
    <div class="nav-horizontal">
      <component :is="cut" @closePane="closePane"></component>
      <Navigation class="mynavigation"></Navigation>
      <ul :style="{'width':navhorizontalWidth}">
        <li v-for="(item,index) in menus" v-bind:key="index" @click="pliclicked(item)">
          <ul :style="{'height':item.childs.length*50}">
            <li v-for="(itemsub,indexsub) in item.childs" :key="indexsub" @click="cliclicked(itemsub)">
              {{itemsub.title}}
            </li>
            <li><div v-if="item.childs.length" class="arrow-down" ></div></li>
          </ul>
          <div class="set_15_social-button Vfacebook" >
            <!--background:url(\'../../../static/IMG/leftsider/icon/图层1.png\');':'width:30px;height:30px;'-->
<!--            <i  class="" :style=" item.active?'color: #fff;-webkit-transform: scale(1);background:url(\'../../../static/IMG/leftsider/icon/图层1.png\')':'transform: scale(1);background:url(\'../../../static/IMG/leftsider/icon/图层1.png\')'"></i>-->

            <img :src="'../../../static/IMG/leftsider/icon/'+item.icon+'.png'"  style="display:block; margin-left: 24px;top:6px;position:relative"/>
            <span class="fatitle" :style="item.active?' color: gray;':'font-size: 18px;'">{{item.title}}</span>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
  import '@/assets/nav-horizontal/normalize.css'
  import HDMeasurement from '@/components/Measurement/HDMeasurement'
  import VDMeasurement from '@/components/Measurement/VDMeasurement'
  import SpaceDMeasurement from '@/components/Measurement/SpaceDMeasurement'
  import SphericalDMeasurement from '@/components/Measurement/SphericalDMeasurement'
  import SWSurfaceAreaMeasurement from '@/components/Measurement/SWSurfaceAreaMeasurement'
  import layerFn from '@/components/menu/LayerFn'
  import AnalysisResultEchartLine from '@/components/Analysis/AnalysisResultEchartLine'
  import Point from '@/components/Plotting/Point'
  import ThreeDimensional from '@/components/Plotting/ThreeDimensional'
  import TwoDimensional from '@/components/Plotting/TwoDimensional'
  import PropertySel from '@/components/Select/PropertySel'
  import Navigation from '@/components/Tool/Navigation'
  import IndoorMode from '@/components/Scene/IndoorMode'
  export default {
    name: "nav-horizontal",
    components:{
      'HDMeasurement':HDMeasurement,
      'VDMeasurement':VDMeasurement,
      'SpaceDMeasurement':SpaceDMeasurement,
      'SphericalDMeasurement':SphericalDMeasurement,
      'AnalysisResultEchartLine':AnalysisResultEchartLine,
      'Point':Point,
      'PropertySel':PropertySel,
      'TwoDimensional':TwoDimensional,
      'ThreeDimensional':ThreeDimensional,
      'SWSurfaceAreaMeasurement':SWSurfaceAreaMeasurement,
      'Navigation':Navigation,
      'IndoorMode':IndoorMode
    },
    data(){
      return{
        navhorizontalWidth:0,
        currentitem:null,
        cut:null,
        menus:[
          {title:'图层',icon:'图层1',class:'',tag:'layerFn',active:false,childs:[]},
          {title:'量测',icon:'测量1',class:'',tag:'',active:false,childs:[
              {title:'空间距离测量',icon:'',tag:'SpaceDMeasurement'},
              {title:'水平距离测量',icon:'',tag:'HDMeasurement'},
              {title:'垂直高度测量',icon:'',tag:'VDMeasurement'},
              {title:'球面距离测量',icon:'',tag:'SphericalDMeasurement'},
              {title:'三维表面面积测量',icon:'',tag:'SWSurfaceAreaMeasurement'},
              {title:'平面面积测量',icon:'',tag:''},
              {title:'体积方量测量',icon:'',tag:''},
              {title:'角度测量',icon:'',tag:''}
            ]},
          {title:'分析',icon:'分析1',class:'',tag:'',active:false,childs:[
              {title:'等高线分析',icon:'',tag:''},
              {title:'坡度分析',icon:'',tag:''},
              {title:'最佳路径分析',icon:'',tag:''},
              {title:'地形剖面分析',icon:'',tag:'AnalysisResultEchartLine'},
              {title:'洪水淹没分析',icon:'',tag:''},
              {title:'通视分析',icon:'',tag:''},
              {title:'视域分析',icon:'',tag:''},
              {title:'空间分析',icon:'',tag:''},
              {title:'阴影分析',icon:'',tag:''}
            ]},
          {title:'场景',icon:'场景1',class:'',tag:'',active:false,childs:[
              {title:'浏览方式',icon:'',tag:''},
              {title:'浏览边界',icon:'',tag:''},
              {title:'室内模式',icon:'',tag:'IndoorMode'},
              {title:'二三维联动',icon:'',tag:''},
              {title:'特效',icon:'',tag:''},
              {title:'街景',icon:'',tag:''},
              {title:'地下模式',icon:'',tag:''},
              {title:'图层高程夸张显示',icon:'',tag:''}
            ]},
          {title:'标绘',icon:'标绘1',class:'',tag:'',active:false,childs:[
              {title:'点',icon:'',tag:'Point'},
              {title:'二维平面',icon:'',tag:'TwoDimensional'},
              {title:'三维立体',icon:'',tag:'ThreeDimensional'},
            ]},
          {title:'时间轴',icon:'时间轴1',class:'',tag:'',active:false,childs:[
              {title:'暂停',icon:'',tag:''},
              {title:'快进',icon:'',tag:''},
              {title:'快退',icon:'',tag:''},
              {title:'时间倍率',icon:'',tag:''},
              {title:'指定时间',icon:'',tag:''}
            ]},
          {title:'查询',icon:'查询1',class:'',tag:'',active:false,childs:[
              {title:'空间查询',icon:'',tag:''},
              {title:'临近查询',icon:'',tag:''},
              {title:'全文属性查询',icon:'',tag:'PropertySel'},
              {title:'混合条件查询',icon:'',tag:''}
            ]},
          {title:'工具',icon:'工具1',class:'',tag:'',active:false,childs:[
              {title:'导航',icon:'',tag:''},
              {title:'清除',icon:'',tag:''}
            ]},
        ]
      }
    },
    created(){
      this.navhorizontalWidth=this.menus.length*110+10+'px';
    },
    methods:{
      pliclicked(item){
        if (this.currentitem!=null)
        {
          this.currentitem.active=false;
        }
        item.active=true;
        this.currentitem=item;
        if (!item.childs.length) {
          switch (item.tag) {
            case 'layerFn':
              this.Layer.closeAll();
              this.Layer.open({
                title:'图层',
                type:2,
                content:{
                  content:layerFn,
                  parent:this,
                  data:[]
                },
                offset:['280','430'], // left top
                area:['310px','470px'],// width height
                shade:false,
                shadeClose:false
              });
              break;
            default:
              break;
          }
        }
      },
      cliclicked(item){
        this.cut=item.tag;
      },
      closePane(){
        this.cut=null;
      }
    }
  }
</script>

<style scoped>
  .nav-horizontal-panel{
    position: relative;

  }
  .nav-horizontal{
    clear: both;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 60px;
  }
  .nav-horizontal > ul
  {
    display: block;
    height: 100%;
    /*width: 780px;*/
    width: 0px;
    margin: 0px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #748c99;*/
    background:url(../../../static/IMG/leftsider/icon/底.png) no-repeat;
    width: 874px;
    height: 88px;
    /*border-radius: 15px;*/
    -moz-box-shadow:2px 2px 5px #333333;
    /*-webkit-box-shadow:2px 2px 5px #333333;*/
    /*box-shadow:2px 2px 5px #333333;*/
  }
  .nav-horizontal > ul > li{
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    /*background-color: #1d7db1;*/
    list-style: none;
    cursor: pointer;
    margin-left: 10px;
    margin-top: -30px;
  }
  .nav-horizontal > ul > li > ul{
    display: none;
    width: 120px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    bottom: 100px;
    margin-left: -20px;
  }

  .nav-horizontal > ul > li > ul >li{
    list-style: none;
    display: block;
    width: 120px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    /*background-color: #68d099;*/
    background-color: rgba(0,172,206,0.5);
    /*opacity:0.5;*/
    color: white;
    border-bottom: 1px dashed #ffffff;

  }
  .nav-horizontal > ul > li > ul >li:last-child{
    list-style: none;
    display: block;
    width: 120px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    /*background-color: #68d099;*/
    background-color: rgba(0,172,206,0.5);
    /*opacity:0.5;*/
    color: white;
    border-bottom:none;

  }
  .nav-horizontal > ul > li > ul >li:hover{
    background-color: #e55b5b;
  }
  .nav-horizontal > ul > li > ul >li:last-child{
    height:15px;
    background-color: transparent;
  }
  .nav-horizontal > ul > li > ul >li:hover:last-child{
    height:15px;
    background-color: transparent;
  }
  .nav-horizontal > ul > li > ul >li .arrow-down{
    height:25px;
    background-color: transparent;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    /*border-top:15px solid #8ECB8D;*/
    border-top:15px solid #00ACCE;
    opacity: 0.6;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
  }
  .nav-horizontal > ul > li:hover >ul{
    display: block;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: .5s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    animation-duration: .5s;
    animation-timing-function: ease;
    animation-fill-mode: both;

    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }

  .set_15_social-button {
    display: block;
    /*background-color: #2fa0ec;*/
    background:url(../../../static/IMG/leftsider/icon/01_03.png) no-repeat;
   /* width: 874px;
    height: 88px;*/
    width: 80px;
    height:42px;
    cursor:pointer;
    line-height:49px;
    /*margin: 0 10px;*/
    /*padding-top: 10px;*/
    text-align: center;
    position: relative;
    color: gray;
    /*overflow: hidden;
    opacity: .99;*/
    /*border-radius: 28%;*/
    /*box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);*/
    top:50px;
    font-weight: bold;
  }
  .set_15_social-button .fa {
    width: 100%;
    font-size: 38px;
    vertical-align: middle;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  }
  .set_15_social-button.Vfacebook:before {
    background-color: #3B5998;
  }
  .set_15_social-button.Vfacebook .fa {
    color: #3B5998;
  }
  .set_15_social-button.Vtwitter:before {
    background-color: #3CF;
  }
  .set_15_social-button.Vtwitter .fa {
    color: #3CF;
  }
  .set_15_social-button.Vgoogle:before {
    background-color: #DC4A38;
  }
  .set_15_social-button.Vgoogle .fa {
    color: #DC4A38;
  }
  .set_15_social-button.Vdribbble:before {
    background-color: #F26798;
  }
  .set_15_social-button.Vdribbble .fa {
    color: #F26798;
  }
  .set_15_social-button.Vskype:before {
    background-color: #00AFF0;
  }
  .set_15_social-button.Vskype .fa {
    color: #00AFF0;
  }
  .set_15_social-button:focus:before, .set_15_social-button:hover:before {
    top: -10%;
    left: -10%;
  }
  .set_15_social-button:focus .fa, .set_15_social-button:hover .fa {
    color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .set_15_social-button:focus .fatitle, .set_15_social-button:hover .fatitle {
    color: #fff;
    font-size: 18px;
  }
  .set_15_social-button .faactive {
    color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .set_15_social-button .fatitleactive {
    color: #fff;
    font-size: 18px;
  }
  .set_15_social-button:focus img, .set_15_social-button:hover img {
    filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;transform: scale(1.2);
  }
  .mynavigation{
    positon:fixed;
  }
</style>
